<template>
  <div class="column-manage">
    <ep-button icon="field.svg" :size="size" @click="visible = !visible">{{ title }}</ep-button>
    <div class="field-box" v-if="visible">
      <ul>
        <li v-for="(column, index) in column" :key="index">
          <!--<vxe-checkbox v-model="column.visible" v-if="column.type !== ('radio' || 'checkbox')">{{column.title }}</vxe-checkbox>-->
          <a-checkbox v-model="column.visible" v-if="column.type !== ('radio' || 'checkbox') && column.field !== 'operate'">
            {{column.title }}
          </a-checkbox>
        </li>
      </ul>
      <div class="btn">
        <a-button  @click="revert">还原</a-button >
        <a-button  type="primary" @click="confirm">确认</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "columnManage",
  props: {
    title: {
      type: String,
      default: '字段展示'
    },
    column: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapGetters(['size']),
  },
  data() {
    return {
      tableColumn: [],
      visible: false
    }
  },
  methods: {
    confirm() {
      this.visible = false;
      this.$emit('change', this.column)
      this.$emit('update:column', this.column)
    },
    revert() {
      this.visible = false;
      this.column.forEach((el) => {
        el.visible = true;
      });
      this.$emit('change', this.column)
      this.$emit('update:column', this.column)
      // this.$refs.userListTable.refreshColumn();
    }
  }
}
</script>

<style scoped lang="less">
.column-manage {
  flex: 0 0 auto;
  position: relative;
  margin-left: 15px;
  .field-box {
    position: absolute;
    top: 40px;
    left: 0;
    right: -40px;
    z-index: 99;
    //border: 1px solid #2175a9;
    background: #ffffff;
    box-shadow: 0 5px 10px #cccccc;
    border-radius: 5px;
    ul {
      padding: 10px;
      li {
        padding: 1px 0;
      }
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px;
      border-top: 1px solid #cccccc;
      //color: #fff;
    }
  }
}
</style>
